<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:58
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 引入g2plot
// 对象的解构
import { Column  } from "@antv/g2plot";
import {ref,onMounted} from 'vue'
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    let plot = null;
    // 将实例化对象的函数封装起来
    let initChart = () => {
      // 实例化一个Colunm对象
      plot = new Column(root.value, {
        data: [
          { year: "1991", value: 3 },
          { year: "1992", value: 4 },
          { year: "1993", value: 3.5 },
          { year: "1994", value: 5 },
          { year: "1995", value: 4.9 },
        ],
        xField: "year",
        yField: "value",
      });
      // 渲染
      plot.render();
    };
    onMounted(initChart);
    return {
      root,
    }
  },
};
</script>